<template>
    <div>
       <mt-header fixed title="新闻详情页面">
           <router-link to="/news" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
       </mt-header>
        <div class="content">
         
            <img :src="'http://localhost:3000/'+lists[$route.params.item].pic.filename" class="img">
            <div class='newsTitle'>新闻标题: <span>{{row.title}}</span></div>
            <div class="newsContent">新闻内容: <p v-html="row.content" class='contentp'></p></div>
            <div><textarea name="" id="" cols="56" rows="8" v-model="content"></textarea></div>
            <input type="text" placeholder='用户名' v-model="user">
            <mt-button type="primary" class="fabiao" @click='comment'>发表评论</mt-button>

            <ul class="comment">
                   <li v-for="(content,index) in comments" class="commentLi">
                        <span>{{content.user}}评论说:</span>
                        <p v-html="content.content"></p>
                    </li>
            </ul>


        </div>

    </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex';
export default {
  data(){
      return{
        row:{},
        user:'',
        content:''
      }
  },
  computed: {
      ...mapGetters(['lists','comments']),
  },
  methods:{
      ...mapActions(['checkLists','checkComments']),
      comment(){
          this.$http.post('http://localhost:3000/comment/data',{user:this.user,content:this.content,cateId:this.row._id})
          .then(res=>{
            //   console.log(res);
            this.user = '';
            this.content = '';
              this.checkComments({cateId:this.row._id});
          })
           
      }
  },
  created(){
    //  console.log(this.$route.params.item);  
    //  console.log(this.lists);
   
     this.row = this.lists[this.$route.params.item];
     this.checkComments({cateId:this.row._id});
    //  console.log(this.comments);
  }



}
</script>
<style>
    .content{
        margin-top:40px;
        padding-bottom:55px;
    }
    .img{
        width: 100%;
        height:200px;
    }
    .newsTitle{
        margin-top:10px;
    }
    .newsContent{
        margin-top:10px;
        margin-bottom:20px; 

    }
    .contentp{
        text-indent: 10px;
    }
    .fabiao{
        width: 80px;
        height: 25px;
        font-size:12px;
       float: right;
    }
    .commentLi{
        border-bottom:1px solid #ccc;
        margin-top: 5px;
        padding: 5px;
    }
    .commentLi span{
        color:darkgray;
    }
    .commentLi p{
        font-size:16px;
        font-weight: 900;
        text-indent: 10px;
        margin-top: 5px;
    }
</style>